<template>
  <div class="theme-toggle-container">
    <el-switch
      v-model="isDarkTheme"
      inline-prompt
      :active-icon="Moon"
      :inactive-icon="Sunny"
      @change="handleSwitchChange"
      active-color="#409EFF"
      inactive-color="#BFCDE4"
      style="z-index: 9999; position: relative;"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { Sunny, Moon } from '@element-plus/icons-vue';

// Theme state
const isDarkTheme = ref(false);
const router = useRouter();

// Initialize theme
const initTheme = () => {
  // 根据当前路由决定使用前台还是后台的主题设置
  const isAdminRoute = router.currentRoute.value.path.startsWith('/admin');
  const themeKey = isAdminRoute ? 'theme_admin' : 'theme_frontend';
  
  const savedTheme = localStorage.getItem(themeKey);
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  isDarkTheme.value = savedTheme ? savedTheme === 'dark' : prefersDark;
  updateTheme(isDarkTheme.value);
};

// Update theme
const updateTheme = (dark) => {
  const html = document.documentElement;
  
  // 根据当前路由决定使用前台还是后台的主题设置
  const isAdminRoute = router.currentRoute.value.path.startsWith('/admin');
  const themeKey = isAdminRoute ? 'theme_admin' : 'theme_frontend';

  
  // 确保移除相反的类
  if (dark) {
    html.classList.add('dark');
    html.classList.remove('light');
  } else {
    html.classList.add('light');
    html.classList.remove('dark');
  }
  
  document.body.setAttribute('data-theme', dark ? 'dark' : 'light');
  localStorage.setItem(themeKey, dark ? 'dark' : 'light');

};

// Toggle theme handler
const toggleTheme = (dark) => {
  isDarkTheme.value = dark;
  updateTheme(dark);
};

// Handle switch change event
const handleSwitchChange = (value) => {
  toggleTheme(value);
};

// Handle system theme changes
const handleSystemThemeChange = (e) => {
  if (!localStorage.getItem('theme')) {
    isDarkTheme.value = e.matches;
    updateTheme(e.matches);
  }
};

// Handle router change for theme synchronization
const handleRouteChange = () => {
  // 当路由变化时，重新初始化主题
  initTheme();
};

// Lifecycle hooks
onMounted(() => {
  initTheme();
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  mediaQuery.addEventListener('change', handleSystemThemeChange);
  
  // 监听路由变化事件
  router.afterEach(handleRouteChange);
});

onUnmounted(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  mediaQuery.removeEventListener('change', handleSystemThemeChange);

});
</script>

<style scoped>
.theme-toggle-container {
  display: flex;
  align-items: center;
  padding: 15px 19px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  z-index: 9999; /* 确保组件在最上层 */
  cursor: pointer;
}

.theme-toggle-container:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .theme-toggle-container:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.theme-text {
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.3s ease;
}

/* Switch styles */
:deep(.el-switch__core) {
  transition: background-color 0.3s ease;
  pointer-events: auto !important;
}

:deep(.el-switch) {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 确保图标可见 */
:deep(.el-switch__label) {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* 为了调试，添加一个轮廓 */
.theme-toggle-container {
  outline: 1px solid transparent; /* 调试用，可移除 */
}
</style>